<template>
	<view class="mask" :class="mask == 'true' || mask == true ? 'mask-show' : ''" @click="Mclose" v-if="show" @touchmove.stop.prevent="preventTouchMove">
		<!-- 加载动画开始 -->
		<!-- loading1~loading30挑选任意一个替换下方html 且替换对应css -->

		<view class="preloader"><view class="loader"></view></view>

		<!-- 加载动画结束 -->
		<view class="title" style="margin-top: 60rpx;">{{ text }}</view>
	</view>
	<!-- 遮罩层-->
</template>

<script scoped="true">
export default {
	name: 'w-loading',
	props: {
		text: String,
		mask: Boolean | String,
		click: Boolean | String,
	},
	data() {
		return {
			show: false,
		};
	},
	methods: {
		preventTouchMove() {
			console.log('stop user scroll it!');
			return;
		},
		Mclose() {
			if (this.click == 'false' || this.click == false) {
				this.show = false;
			}
		},
		open() {
			this.show = true;
		},
		close() {
			this.show = false;
		},
	},
};
</script>

<style>
.mask {
	/* pointer-events: none; */
	position: fixed;
	z-index: 99999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100vh;
	width: 100vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.mask.mask-show {
	background: rgba(7, 17, 27, 0.3);
}
.title {
	color: #fff;
	font-size: 28upx;
}

/* loading加载动画的css */
.loader {
	display: block;
	position: relative;
	left: 50%;
	top: 50%;
	width: 150upx;
	height: 150upx;
	margin: -75upx 0 0 -75upx;
	border-radius: 50%;
	border: 3upx solid transparent;
	border-top-color: #9370db;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}
.loader::before {
	content: '';
	position: absolute;
	top: 5upx;
	left: 5upx;
	right: 5upx;
	bottom: 5upx;
	border-radius: 50%;
	border: 3upx solid transparent;
	border-top-color: #ba55d3;
	-webkit-animation: spin 3s linear infinite;
	animation: spin 3s linear infinite;
}
.loader::after {
	content: '';
	position: absolute;
	top: 15upx;
	left: 15upx;
	right: 15upx;
	bottom: 15upx;
	border-radius: 50%;
	border: 3upx solid transparent;
	border-top-color: #ff00ff;
	-webkit-animation: spin 1.5s linear infinite;
	animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
</style>
